<template>
	<view class="content">
		<view class="header">
			<view class=""></view>
			<view class="header-right" @click="danger">
				<image src="/static/add.png" mode=""></image>
				<span>隐患上报</span>
			</view>
		</view>
		<!-- 图片 -->
		<view>
			<view class="ipts">

				<!-- 施工地址 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工地址</span>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<input class="place-class" type="text" v-model="address" placeholder="请填写乡镇区、村、施工地址" />
						<!-- <span class="place-class">请填写乡镇区、村、施工地址</span> -->
						<image src="/static/pagesB/weizhi.png" @tap="getMap()" mode=""></image>
					</view>
				</view>

				<!-- 建档时间 -->
				<!-- <view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建档时间</span>
					</view>
					<input @tap="isTime" class="item-ipt" disabled type="text" v-model="time" placeholder="请选择建档时间" />
				</view> -->

				<!-- 建设单位 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设单位</span>
					</view>
					<input class="item-ipt" type="text" v-model="index" placeholder="请输入" />
					<!-- <picker @change="PickerChange" :value="index" :range="user">
						<view class="" style="display: flex;align-items: center;">
							<view class="place-class">
								{{index>-1?user[index]:'请选择'}}
							</view>
							<image src="/static/xiala.png" mode=""></image>
						</view>
					</picker> -->
				</view>

				<!-- 建设单位联系人 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设单位联系人</span>
					</view>
					<input class="item-ipt" type="text" v-model="build_unit_username" placeholder="请输入" />
				</view>

				<!-- 联系电话 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设联系电话</span>
					</view>
					<input type="number" value="" v-model="build_unit_mobile" placeholder="请输入" />
				</view>

				<!-- 施工单位 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工单位</span>
					</view>
					<input type="text" v-model="construction_unit" placeholder="请输入" />
				</view>

				<!-- 施工单位联系人 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工单位联系人</span>
					</view>
					<input type="text" v-model="construction_unit_username" placeholder="请输入"
						placeholder-style="place-class" />
				</view>

				<!-- 联系电话 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工联系电话</span>
					</view>
					<input type="number" v-model="construction_unit_mobile" placeholder="请输入"
						placeholder-style="place-class" />
				</view>

				<!-- 施工类型 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工类型</span>
					</view>
					<!-- <picker @change="PickerChanges" range-key="name" :value="indexs" :range="type"> -->
					<view class="" style="display: flex;align-items: center;" @tap="indexs = !indexs">
						<view class="place-class">
							{{ typeObj.label||'请选择'}}
						</view>
						<image src="/static/xiala.png" mode=""></image>
						<u-select v-model="indexs" value-name="id" label-name="name" :list="type"
							@confirm="PickerChanges"></u-select>
					</view>
					<!-- </picker> -->
				</view>

				<!-- 施工工艺 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工工艺</span>
					</view>
					<!-- <picker @change="PickerChanges1" range-key="name" :value="indexs1" :range="technology"> -->
					<view class="" style="display: flex;align-items: center;" @tap="indexs1 = !indexs1">
						<view class="place-class">
							{{technologyObj.label||'请选择'}}
						</view>
						<image src="/static/xiala.png" mode=""></image>
						<u-select v-model="indexs1" value-name="id" label-name="name" :list="technology"
							@confirm="PickerChanges1"></u-select>
					</view>
					<!-- </picker> -->
				</view>

				<!-- 采用工机具 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>采用工机具</span>
					</view>
					<!-- <picker @change="PickerChanges2" range-key="name" :value="indexs2" :range="tool"> -->
					<view class="" style="display: flex;align-items: center;" @tap="indexs2 = !indexs2">
						<view class="place-class">
							{{toolObj.label||'请选择'}}
						</view>
						<image src="/static/xiala.png" mode=""></image>
						<u-select v-model="indexs2" value-name="id" label-name="name" :list="tool"
							@confirm="PickerChanges2"></u-select>
					</view>
					<!-- </picker> -->
				</view>

				<!-- 天然气管概述 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>天然气管概述</span>
					</view>
					<input type="text" v-model="trachea_info" placeholder="请输入" placeholder-style="place-class" />
				</view>

				<!-- 信息来源 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>信息来源</span>
					</view>
					<!-- <picker @change="PickerChanges3" range-key="name" :value="indexs3" :range="machines"> -->
					<view class="" style="display: flex;align-items: center;" @tap="indexs3 = !indexs3">
						<view class="place-class">
							{{machinesObj.label||'请选择'}}
						</view>
						<image src="/static/xiala.png" mode=""></image>
						<u-select v-model="indexs3" value-name="id" label-name="name" :list="machines"
							@confirm="PickerChanges3"></u-select>
					</view>
					<!-- </picker> -->
				</view>

				<!-- 第一时间到达施工现场情况简述 -->
				<view class="supplement">
					<view class="info-item" style="border-bottom: 0;">
						<view class="info-item-left">
							<view class="dot"></view>
							<span>第一时间到达施工现场情况简述</span>
						</view>
						<!-- <span class="place-class">添加备注</span> -->
					</view>
					<view class="explain">
						<textarea v-model="autoText" maxlength="500" auto-height @input="textChange" class="textArea"
							placeholder="请简述..." style="font-size: 28rpx;" />
					</view>
					<!-- <view class="suppBottom">
							<view class="danger-img-box">
							</view>
							<view class="num">
								<view class="">{{textNumber}}/500</view>
							</view>
						</view> -->
				</view>
				<!-- 潜在影响居民户数 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>潜在影响居民户数</span>
					</view>
					<input type="number" v-model="resident_num" placeholder="请输入数字" />
				</view>

				<!-- 潜在影响工商业户数 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>潜在影响工商业户数</span>
					</view>
					<input type="number" v-model="business_num" placeholder="请输入数字" />
				</view>

				<!-- 应急阀门 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>应急阀门</span>
					</view>
					<input type="text" @tap="openPopup" disabled placeholder="请选择" />
				</view>
				<view class="" style="padding: 0 20rpx;">
					<template v-for="i,index in datalist">
						<view class="info-item" :key="index">
							<view class="info-item-left">
								<span>{{i.number}}</span>
							</view>
							<view class="info-item-right">
								<input v-model="i.address" disabled placeholder="请选择" />
								<text @tap="del_famen(index)" class="del_famen">删除</text>
							</view>
						</view>
					</template>
				</view>
			</view>
			<!-- 第二块 -->
			<view class="ipts">
				<!-- 工地照片 -->
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>工地照片</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-for="(i,index) in img1">
							<image class="form-img" :src="i" :key="index" @tap="seeimg1(index)"></image>
							<image class="delet" src="/static/delet.png" mode="" @tap="deletImg1(index)"></image>
						</view>
						<view class="add" @tap="choosefrom1">
							<u-icon name="camera" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>


				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>建设方告知书签发照片</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-for="(i,index) in img2">
							<image class="form-img" :src="i" :key="index" @tap="seeimg2(index)"></image>
							<image class="delet" src="/static/delet.png" mode="" @tap="deletImg2(index)"></image>
						</view>
						<view class="add" @tap="choosefrom2">
							<u-icon name="camera" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>


				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>施工方告知书签发照片</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-for="(i,index) in img3">
							<image class="form-img" :src="i" :key="index" @tap="seeimg3(index)"></image>
							<image class="delet" src="/static/delet.png" mode="" @tap="deletImg3(index)"></image>
						</view>
						<view class="add" @tap="choosefrom3">
							<u-icon name="camera" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>

				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>保护方案签订照片</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-for="(i,index) in img4">
							<image class="form-img" :src="i" :key="index" @tap="seeimg4(index)"></image>
							<image class="delet" src="/static/delet.png" mode="" @tap="deletImg4(index)"></image>
						</view>
						<view class="add" @tap="choosefrom4">
							<u-icon name="camera" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>其他照片</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-for="(i,index) in img5">
							<image class="form-img" :src="i" :key="index" @tap="seeimg5(index)"></image>
							<image class="delet" src="/static/delet.png" mode="" @tap="deletImg5(index)"></image>
						</view>
						<view class="add" @tap="choosefrom5">
							<u-icon name="camera" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<!-- 电子签名 -->
				<view class="info-item" v-if="!read_only">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>电子签名</span>
					</view>
					<view class="addform-items">
						<view class="" style="position: relative;" v-if="signature">
							<image class="form-img" :src="signature.intact_url" @tap="toView(signature.intact_url)">
							</image>
							<image class="delet" src="/static/delet.png" mode="" @tap="del()"></image>
						</view>
						<view class="add" @tap="$navTo('/pagesB/rithcheck/sign')" v-if="signature==''">
							<u-icon name="plus" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 上次安检时间 -->
			<view class="ipts">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>是否持续跟踪</span>
					</view>
					<view class="danger-img-box">
						<switch :checked="isChecked" @change="isChecked = !isChecked" style="transform:scale(0.7)" />
					</view>
				</view>
			</view>

			<view class="btns">
				<view class="btn1 consel" @click="black">取消</view>
				<view class="btn1 save" @click="userPost">保存</view>
			</view>
		</view>
		<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />
		<u-popup v-model="valveShow" :mask-close-able="false" mode="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<view class="ipt-box">
						<input v-model="searchname" type="text" value="" :placeholder="prompt"
							placeholder-class="plac-class" />
						<image src="/static/search1.png" mode="" @tap="searNum"></image>
					</view>
					<view class="header1-right" @tap="openPopup()">
						<span>确定</span>
					</view>
				</view>
				<view class="scroll-view">
					<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower">
						<view>
							<view class="valve-item" @tap="pushList(i,index)" v-for="i,index in valveList" :key="index"
								:class="i.status?'selected':''">
								<text>{{i.number}}</text>
								<text>{{i.address}}</text>
							</view>
						</view>
					</scroll-view>

				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import QQMapWX from "@/common/qqmap-wx-jssdk";
	import amap from '@/common/amap-wx.js'
	import cpimg from "@/components/cpimg/cpimg.vue"
	import easySelect from '@/components/easy-select/easy-select'
	export default {
		components: {
			easySelect,
			cpimg
		},
		data() {
			return {
				valveShow: false,
				searchname: '', //搜索框
				page: 1,
				valveList: [],
				selectList: [],
				index: '',
				indexs: false,
				indexs1: false,
				indexs2: false,
				indexs3: false,
				indexs4: -1,
				user: ['居民用户', '工商业用户'],
				type: [],
				technology: [],
				tool: [],
				machines: [],
				standby: [],
				typeObj: {
					value: '',
					label: ''
				},
				technologyObj: {
					value: '',
					label: ''
				},
				toolObj: {
					value: '',
					label: ''
				},
				machinesObj: {
					value: '',
					label: ''
				},
				ret: '',
				mysearchIpt: false,
				searchIpt: '',
				searchIpts: '',
				flag: true,
				token: '',
				last_check: {},
				user_info: {},
				textNumber: 0,
				// 品牌数组
				options: [],
				// 功率数组
				options1: [],
				// 品牌id
				brandId: '',
				// 功率id
				powerId: '',
				// 备注
				autoText: '', //第一现场情况简述
				// 气表底数
				meter_base_num: '',
				// 默认显示品牌名
				brandName: '',
				// 默认显示功率
				powerName: '',
				// 气表照片地址
				img1: [],
				img2: [],
				img3: [],
				img4: [],
				img5: [],
				// 是否安检
				isChecked: false,
				isCheckedNum: '',
				// 是否签收
				isChecked1: true,
				isCheckedNum1: '',
				// 是否派发
				isChecked2: true,
				isCheckedNum2: '',
				showRecord: true,
				marginBotton1: 100 + 'rpx',
				danger_id: '',
				sercode: [], //隐患id
				read_only: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				time: '',
				show: false,
				address: '', //施工地点
				build_unit_username: '', //建设联系人
				build_unit_mobile: '', //	建设联系电话
				construction_unit: '', //施工单位
				construction_unit_username: '', //施工联系人
				construction_unit_mobile: '', //施工联系电话
				trachea_info: '', //	天燃气管概述
				resident_num: '', //	潜在居民户数
				business_num: '', //潜在商业户数
				signature: '',
				amapPlugin: null,
				key: '25d8a43c8ee55f7c0e6dfb815fdff544',
				datalist: [],
				id: '',
				flag: true,
				lat:'', // 经度
				long:'', // 维度
			}
		},
		onShow() {

		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.init()
			}
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			if (!this.id) {
				this.getMap()
			}
			this.getTypesList()
			this.getEmergencyValveList()
		},
		computed: {
			_valveList_id() {
				var str = []
				if (this.datalist.length > 0) {
					var arrlist = this.datalist
					for (let i = 0; i < arrlist.length; i++) {
						// if (arrlist[i].status) {
						str.push(arrlist[i].id)
						// }
					}
				}
				return str.toString()
			}
		},
		methods: {
			init() {
				let _this = this
				uni.request({
					url: this.$url + 'staff.third_party/details',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						id: _this.id
					},
					success: res => {
						if (res.data.code == 1) {
							let info = res.data.data
							_this.address = info.address
							_this.index = info.build_unit
							_this.build_unit_username = info.build_unit_username
							_this.build_unit_mobile = info.build_unit_mobile
							_this.construction_unit = info.construction_unit
							_this.construction_unit_username = info.construction_unit_username
							_this.construction_unit_mobile = info.construction_unit_mobile
							_this.typeObj = {
								value: info.construction_type,
								label: info.construction_type_text
							}
							_this.technologyObj = {
								value: info.construction_workmanship,
								label: info.construction_workmanship_text
							}
							_this.toolObj = {
								value: info.tools,
								label: info.tools_text
							}
							_this.trachea_info = info.trachea_info
							_this.machinesObj = {
								value: info.source_info,
								label: info.source_info_text
							}
							_this.autoText = info.scene_info
							_this.resident_num = info.resident_num
							_this.business_num = info.business_num
							_this.datalist = info.emergency_valve_list
							_this.img1 = info.construction_images
							_this.img2 = info.build_sign_images
							_this.img3 = info.construction_sign_images
							_this.img4 = info.protected_sign_images
							_this.img5 = info.other_images
							_this.signature = {
								intact_url: info.electronic_sign_image,
								url: info.electronic_sign_image1
							}
							_this.sercode = info.danger_id.split(',')
							_this.isCheckedNum = info.track == 0 ? '0' : '1'
							_this.isChecked = info.track == 0 ? false : true
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			black() {
				uni.navigateBack({
					delta: 1
				})
			},
			del_famen(index) {
				this.datalist.splice(index, 1)
			},
			pushList(e, index) {
				if (this.valveList[index].status == true) {
					console.log('1111');
					this.valveList[index].status = false
					this.datalist.splice(this.datalist.length - 1, 1)
					return false;
				}
				if (this.valveList[index].status == false) {
					this.valveList[index].status = true
					this.datalist.push(e);
				}
			},
			scrolltolower() {
				this.page++
				this.getEmergencyValveList()
			},
			openPopup() {
				this.valveShow = !this.valveShow
				for (let i = 0; i < this.valveList.length; i++) {
					this.valveList[i].status = false
					for (let j = 0; j < this.datalist.length; j++) {
						if (this.valveList[i].id == this.datalist[j].id) {
							this.valveList[i].status = true
						}
					}
				}
			},
			getEmergencyValveList() {
				var _this = this
				uni.request({
					url: _this.$url + 'staff.third_party/getEmergencyValveList',
					method: "POST",
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						page: _this.page,
						searchname: _this.searchname
					},
					success: (res) => {
						if (res.data.code == 1) {
							let {
								data
							} = res.data
							if (data) {
								data.forEach((item, index) => {
									item.status = false
								})
							}
							_this.valveList = _this.valveList.concat(data)
						}
					}
				})
			},
			getTypesList() {
				var _this = this
				uni.request({
					url: _this.$url + 'staff.third_party/getTypesList',
					method: "POST",
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 1) {
							_this.type = res.data.data.constructiontypelist
							_this.technology = res.data.data.construction_workmanshiplist
							_this.tool = res.data.data.toollist
							_this.machines = res.data.data.sourceinfolist
						}
					}
				})
			},
			getMap() {
				var that = this;
				var qqmapsdk;
				this.amapPlugin.getRegeo({
					success: (data) => {
						uni.hideLoading();
						qqmapsdk = new QQMapWX({
							key: "662BZ-2EAR6-M34S7-M4NPO-HFV3F-QEBTV" //自己申请的key
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: data[0].latitude,
								longitude: data[0].longitude
							},
							success(addressRes) {
								// console.log('data[0].latitude,',data[0].latitude,);
								// console.log('data[0].longitude,',data[0].longitude,);
								that.lat = data[0].latitude;
								that.long = data[0].longitude;
								that.address = addressRes.result.address + addressRes.result
									.address_reference.landmark_l2.title;
									console.log(that.address,'成功');
							},
							fail(res) {
								// console.log(res, '错误');
							}
						});
					}
				});
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			PickerChanges(e) {
				console.log(e);
				this.typeObj = e[0]
				// this.indexs = e.detail.value
			},
			PickerChanges1(e) {
				this.technologyObj = e[0]
				// this.indexs1 = e.detail.value
			},
			PickerChanges2(e) {
				this.toolObj = e[0]
				// this.indexs2 = e.detail.value
			},
			PickerChanges3(e) {
				this.machinesObj = e[0]
				// this.indexs3 = e.detail.value
			},
			PickerChanges4(e) {
				this.indexs4 = e.detail.value
			},
			// 选择图片
			choosefrom1() {
				if (this.img1.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$api + 'common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.img1.push(JSON.parse(uploadFileRes.data).data
											.intact_url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			toView(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			del() {
				this.signature = ''
			},
			confirm(e) {

				this.time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			isTime() {
				if (!this.read_only) {
					this.show = true
				}
			},
			// 删除图片
			deletImg1(index) {
				this.img1.splice(index, 1)
			},
			// 图片预览
			seeimg1(index) {
				console.log(index);
				uni.previewImage({
					urls: this.img1,
					current: index,
					loop: true
				})
			},
			// 选择图片2
			choosefrom2() {
				if (this.img2.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$api + 'common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.img2.push(JSON.parse(uploadFileRes.data).data
											.intact_url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			// 删除图片2
			deletImg2(index) {
				this.img2.splice(index, 1)
			},
			// 图片预览2
			seeimg2(index) {
				console.log(index);
				// uni.previewImage({
				// 	urls: this.img1
				// });
				console.log(this.img2);
				uni.previewImage({
					urls: this.img2,
					current: index,
					loop: true
				})
			},
			// 选择图片3
			choosefrom3() {
				if (this.img3.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$api + 'common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.img3.push(JSON.parse(uploadFileRes.data).data
											.intact_url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			// 删除图片3
			deletImg3(index) {
				this.img3.splice(index, 1)
			},
			// 图片预览3
			seeimg3(index) {
				console.log(index);
				// uni.previewImage({
				// 	urls: this.img1
				// });
				console.log(this.img3);
				uni.previewImage({
					urls: this.img3,
					current: index,
					loop: true
				})
			},
			// 选择图片4
			choosefrom4() {
				if (this.img4.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$api + 'common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.img4.push(JSON.parse(uploadFileRes.data).data
											.intact_url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			// 删除图片4
			deletImg4(index) {
				this.img4.splice(index, 1)
			},
			// 图片预览4
			seeimg4(index) {
				console.log(index);
				// uni.previewImage({
				// 	urls: this.img1
				// });
				console.log(this.img4);
				uni.previewImage({
					urls: this.img4,
					current: index,
					loop: true
				})
			},
			// 选择图片5
			choosefrom5() {
				if (this.img5.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$api + 'common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.img5.push(JSON.parse(uploadFileRes.data).data
											.intact_url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			// 删除图片5
			deletImg5(index) {
				this.img5.splice(index, 1)
			},
			// 图片预览5
			seeimg5(index) {
				console.log(index);
				// uni.previewImage({
				// 	urls: this.img1
				// });
				console.log(this.img5);
				uni.previewImage({
					urls: this.img5,
					current: index,
					loop: true
				})
			},

			//图片删除
			updetail(type, index) {
				this.img1 = ''
			},
			updetail2(index) {
				this.img2.splice(index, 1)
			},
			updetail3(index) {
				this.img3.splice(index, 1)
			},
			updetail4(index) {
				this.img4 = ""
			},
			//图片预览
			seeimg(img) {
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			// 选择气表照片

			changeImg(ret) {
				var that = this;
				that.ret = ret
				that.$refs.cpimg._changImg()

			},
			cpimgOk(file) {
				let that = this
				var ret = that.ret
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token: that.token
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if (dataPath.code == 1) {
							if (ret == '燃气表') {
								that.fileImg1 = dataPath.data.url
								that.img1 = file[0]
								// console.log(111)
							}
							if (ret == '燃气火点') {
								that.fileImg2.push(dataPath.data.url)
								that.img2.push(file[0])
							}
							if (ret == '资料') {
								that.fileImg3.push(dataPath.data.url)
								that.img3.push(file[0])
							}
							if (ret == '其他') {
								that.fileImg4 = dataPath.data.url
								that.img4 = file[0]
							}
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败'
						})
					}
				});


			},

			cpimgErr(e) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				})
				console.log(e)
			},

			textChange(e) {
				if (e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				this.textNumber = e.detail.cursor
			},
			// 获取品牌列表
			getBrandList() {
				let that = this
				that.$request.request({
					url: '/staff/brand_list',
					method: 'POST',
					data: {
						token: that.token
					}
				}).then(res => {
					that.options = res.data.data
				})
				that.$request.request({
					url: '/staff/power_list',
					method: 'POST',
					data: {
						token: that.token
					}
				}).then(res => {
					that.options1 = res.data.data
				})
			},
			// 提交保存
			userPost() {

				var that = this
				if (!this.index) return this.$showToast('请输入建设单位')
				if (!this.build_unit_username) return this.$showToast('请输入建设单位联系人')
				if (!this.build_unit_mobile) return this.$showToast('请输入建设联系电话')
				if (!this.construction_unit) return this.$showToast('请输入施工单位')
				if (!this.construction_unit_username) return this.$showToast('请输入施工单位联系人')
				if (!this.construction_unit_mobile) return this.$showToast('请输入施工联系电话')
				if (!this.typeObj.value) return this.$showToast('请选择施工类型')
				if (!this.technologyObj.value) return this.$showToast('请选择施工工艺')
				if (!this.toolObj.value) return this.$showToast('请选择采用工机具')
				if (!this.trachea_info) return this.$showToast('请输入天然气管概述')
				if (!this.machinesObj.value) return this.$showToast('请选择信息来源')
				if (!this.autoText) return this.$showToast('请输入现场情况简述')
				if (!this.resident_num) return this.$showToast('请输入潜在影响居民户数')
				if (!this.business_num) return this.$showToast('请输入潜在影响工商业户数')
				if (this.img1.length < 1) return this.$showToast('请上传工地照片')
				// if (this.img2.length < 1) return this.$showToast('请上传建设方告知书签发照片')
				// if (this.img3.length < 1) return this.$showToast('请上传施工方告知书签发照片')
				// if (this.img4.length < 1) return this.$showToast('请上传保护方案签订照片')
				if (!this.signature.intact_url) return this.$showToast('请上传电子签名')


				if (that.isChecked == false) {
					that.isCheckedNum = '0'
				} else {
					that.isCheckedNum = '1'
				}
				if (this.flag) {
					this.flag = false
					if (that.id) {
						that.updatethitdparty()
					} else {
						that.add()
					}
				}


			},
			updatethitdparty() {
				var that = this
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				uni.request({
					url: that.$url + 'staff.third_party/updatethitdparty',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						id: that.id,
						address: that.address,
						build_unit: that.index,
						build_unit_username: that.build_unit_username,
						build_unit_mobile: that.build_unit_mobile,
						construction_unit: that.construction_unit,
						construction_unit_username: that.construction_unit_username,
						construction_unit_mobile: that.construction_unit_mobile,
						construction_type: that.typeObj.value,
						construction_workmanship: that.technologyObj.value,
						tools: that.toolObj.value,
						trachea_info: that.trachea_info,
						source_info: that.machinesObj.value,
						scene_info: that.autoText,
						resident_num: that.resident_num,
						business_num: that.business_num,
						emergency_valve: that._valveList_id,
						construction_images: that.img1,
						build_sign_images: that.img2,
						construction_sign_images: that.img3,
						protected_sign_images: that.img4,
						other_images: that.img5,
						electronic_sign_image: that.signature.url,
						track: that.isCheckedNum,
						danger_id: that.sercode,
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					},
					complete: () => {
						uni.hideLoading()
						that.flag = true
					}
				})
			},
			add() {
				var that = this
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				uni.request({
					url: that.$url + 'staff.third_party/add',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						address: that.address,
						build_unit: that.index,
						build_unit_username: that.build_unit_username,
						build_unit_mobile: that.build_unit_mobile,
						construction_unit: that.construction_unit,
						construction_unit_username: that.construction_unit_username,
						construction_unit_mobile: that.construction_unit_mobile,
						construction_type: that.typeObj.value,
						construction_workmanship: that.technologyObj.value,
						tools: that.toolObj.value,
						trachea_info: that.trachea_info,
						source_info: that.machinesObj.value,
						scene_info: that.autoText,
						resident_num: that.resident_num,
						business_num: that.business_num,
						emergency_valve: that._valveList_id,
						construction_images: that.img1,
						build_sign_images: that.img2,
						construction_sign_images: that.img3,
						protected_sign_images: that.img4,
						other_images: that.img5,
						electronic_sign_image: that.signature.url,
						track: that.isCheckedNum,
						danger_id: that.sercode,
						lat:that.lat,
						long: that.long
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					},
					complete: () => {
						uni.hideLoading()
						that.flag = true
					}
				})
			},
			searNum() {
				let that = this
				this.valveList = []
				this.page = 1
				this.getEmergencyValveList()
			},
			searChange(e) {
				// console.log(e.detail)
				if (e.detail.value == '') {
					this.flag = false
				}
			},
			clousText() {
				this.flag = true
				this.searchIpt = ''
			},
			danger() {

				uni.navigateTo({
					url: '../securityCheck/dangerReport?status=1'
				})

			},
			close() {
				uni.navigateTo({
					url: '../index/index'
				})
				uni.removeStorage({
					key: 'img1'
				})
				uni.removeStorage({
					key: 'img2'
				})
				uni.removeStorage({
					key: 'img3'
				})
				uni.removeStorage({
					key: 'img4'
				})
				uni.removeStorage({
					key: 'bztext'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: #003690;
			padding: 0 40rpx 20rpx;

			.ipt-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 580rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.header1-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #E2ECFB;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.scroll-view {
			height: 90%;
			padding: 0 24rpx;

			.valve-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1rpx solid #999999;

				text:nth-child(1) {
					flex: 1;
					padding-right: 20rpx;
				}

				text:nth-child(2) {
					flex: 2;
				}
			}

			.selected {
				background: rgba(0, 54, 144, 0.1);
				color: #003690;
				position: relative;

				&::before {
					content: '√';
					position: absolute;
					color: #003690;
					font-size: 26rpx;
					right: 0rpx;
					top: 50%;
					transform: translateY(-50%);
				}

			}
		}
	}

	.addform-items {
		display: flex;
		align-items: center;

		.form-img {
			width: 60rpx !important;
			height: 60rpx !important;
			margin-right: 20rpx;
		}

		.delet {
			position: absolute;
			top: -8rpx;
			right: 4rpx;
			width: 28rpx;
			height: 28rpx;
			z-index: 10;
		}

		.add {
			width: 60rpx;
			height: 60rpx;
			border: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.content {
		background: #F1F1F1;
		padding-bottom: 100rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx;
			background-color: #fff;

			.header-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				margin-right: 20rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.header1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: #003690;
			padding: 0 40rpx;

			.ipt-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 480rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.header1-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #E2ECFB;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.dataCont {
			padding-top: 12rpx;
			padding-left: 42rpx;
			padding-right: 30rpx;

			.searTitle {
				font-size: 32rpx;
				font-weight: 600;
				text-align: left;
				color: #333333;
			}

			.searResult {
				display: flex;
				justify-content: space-between;

				.resText {
					font-size: 32rpx;
					font-weight: 400;
					text-align: left;
					color: #777777;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.ipts {
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.info-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// height: 72rpx;
			width: 100%;
			height: 100rpx;
			padding: 0rpx 32rpx;
			align-items: center;
			background-color: #fff;
			font-size: 24rpx;
			color: #333;
			border-bottom: 1rpx solid #DDDDDD;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			input {
				flex: 1;
				text-align: right;
			}

			.dot {
				width: 8rpx;
				height: 8rpx;
				background-color: #003690;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.danger-img {
				position: relative;

				.updeletes {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 88;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.danger-img-box {
				display: flex;

				.danger-img {
					width: 75rpx;
					height: 75rpx;
					// border: 2rpx dashed #eee;
					margin-right: 10rpx;


					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.danger-img-box2 {
				display: flex;

				.danger-img {
					width: 75rpx;
					height: 75rpx;
					// border: 2rpx dashed #eee;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}
			}

			.info-item-left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}

			.info-item-right {
				display: flex;
				align-items: center;

				.del_famen {
					margin-left: 20rpx;
					color: red;
				}
			}
		}

		.hengxian {
			width: 700rpx;
			height: 2rpx;
			background-color: #eee;
			margin: 20rpx auto;
		}

		.place-class {
			font-size: 28rpx;
			color: #999;
		}

		.item-ipt {
			width: 400rpx;
			text-align: end;
		}

		.btn {
			width: 646rpx;
			height: 80rpx;
			margin: 74rpx auto;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-image: linear-gradient(to bottom, #2366D5, #001B48);
			font-size: 32rpx;
			color: #E5EFFE;
		}

		.btns {
			position: fixed;
			bottom: 0;
			display: flex;
			width: 100%;
			z-index: 333;

			.btn1 {
				width: 50%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.consel {
				background-color: #e9e9e9;
				color: #777;
			}

			.save {
				background-color: #003690;
				color: #fff;
			}
		}

		.btn:active {
			background: rgba(0, 0, 0, 0.4);
		}

		.zhanwei {
			height: 250rpx;
		}

		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			border-bottom: 2rpx solid #eee;

			.record-item-left {
				display: flex;
				align-items: center;

				.shu {
					width: 8rpx;
					height: 28rpx;
					background-color: #003690;
					border-radius: 8rpx;
				}

				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin: 0 10rpx;
				}

				.time {
					font-size: 24rpx;
					color: #777;
				}
			}

			.record-item-right {
				display: flex;
				align-items: center;

				.dianhua {
					width: 28rpx;
					height: 28rpx;
				}

				.zhankai {
					width: 36rpx;
					height: 36rpx;
				}

				.title {
					font-size: 32rpx;
					color: #555;
					font-weight: 500;
					margin: 0 10rpx;
				}
			}
		}

		.supplement {
			background-color: #fff;
			position: relative;
			overflow: hidden;

			.explain {
				.textArea {
					min-height: 100rpx;
					width: 690rpx;
					border-bottom: 1rpx solid #DDDDDD;
					padding: 14rpx 30rpx;
					font-size: 32rpx;
					text-align: left;
					color: rgba(187, 187, 187, 0.84);
				}
			}

			.suppBottom {
				.danger-img {
					position: relative;
					margin-left: 50rpx;
					margin-bottom: 0rpx;
					width: 68rpx;
					height: 68rpx;
					float: left;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.num {
					float: right;
					margin-right: 26rpx;
				}
			}
		}
	}
</style>
